<template>
  <div style="height: 100%;">
    <transition name="fade">
      <Cropper
        v-if="dialogCropperVisible"
        :option-img="optionImg"
        :fileinfo="fileinfo"
        use-type="PUBLIC_IMG"
        :fixed-number="[500, 500]"
        @formSubmit="cropperSubmit"
        @formClose="cropperClose"
      />
    </transition>
    <OptionTitle
      title="功能入口"
      :sub-title="`最多添加${config.maxNum}个功能，功能名称不得超过五个字，建议尺寸100*100像素，尺寸比例不匹配时，图片将被裁剪以铺满画面`"
    />
    <el-form label-width="100" class="mt20">
      <el-form-item label="每行数量：" class="mb5">
        <el-radio v-for="item in rowNumList" :key="item.key" v-model="content.rowNum" :label="item.value" @change="modulesChange">{{ item.value }}</el-radio>
      </el-form-item>
    </el-form>
    <div class="side">
      <el-button icon="el-icon-plus" @click="openDrawer">添加</el-button>
      <Draggable v-model="venueContent.customList" class="list" draggable=".item" @end="modulesChange">
        <div v-for="item in venueContent.customList.filter(i=>i.isSelect == '1')" :key="item.id" class="item">
          <div class="img_wrap mr10">
            <img class="img" :src="item.icon" alt="">
            <el-upload
              v-if="item.iscanChangeIcon == '1'"
              class="device-uploader"
              accept=".jpg,.png"
              :auto-upload="false"
              :action="uploadFileUrl"
              :data="uploadParam"
              :show-file-list="false"
              :on-change="
                (file) => addFileChange(file, item.id)
              "
            >
              <div class="upload_btn">重新上传</div>
            </el-upload>
          </div>
          <div class="input_wrap">
            <el-input v-model="item.title" :disabled="item.iscanRename != '1'" :maxlength="item.maxNameNum || 4" @blur="modulesChange" />
            <span>{{ item.title.length }}/{{ item.maxNameNum || 4 }}</span>
          </div>

          <img class="drag" src="@/assets/icon/drag.png" alt="">
          <div class="del_wrap" @click="moduleItemDel(item.id)">
            <i color="#FDEBE8" class="el-icon-delete" />
          </div>
        </div>
      </Draggable>
    </div>

    <el-drawer
      title="添加功能入口"
      :visible.sync="isShowDrawer"
      size="50%"
      @close="customSub"
    >
      <div class="drawer_wrap">
        <div class="customDrawer">
          <div v-for="item in venueContent.customList" :key="item.id" class="item">
            <el-checkbox v-model="item.isSelect" :disabled="venueContent.customList.filter(i=>i.isSelect == '1').length > config.maxNum && item.isSelect == '0'" :label="item.key" false-label="0" true-label="1">{{ item.value }}</el-checkbox>
            <img :src="item.icon" alt="">
            <div class="flex1">{{ item.title }}</div>
          </div>
        </div>
      </div>

      <div class="drawer_bottom">
        <div class="separate" />
        <el-button
          v-preventReClick
          type="primary"
          class="ml20"
          @click="customSub"
        >提交</el-button>
        <el-button @click="isShowDrawer = false">取消</el-button>
      </div>
    </el-drawer>

  </div>
</template>

<script>
import Draggable from 'vuedraggable'
import Cropper from '@/components/cropper'
import OptionTitle from '../../../components/optionTitle.vue'
import { uploadFile } from '@/api'
export default {
  components: {
    OptionTitle,
    Draggable,
    Cropper
  },
  props: {
    config: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      rowNumList: [],
      ruleList: [],
      content: {},
      venueContent: {},

      isShowDrawer: false,
      checkedList: [],

      dialogCropperVisible: false,
      optionImg: '',
      files: {},
      fileinfo: {},
      uploadFileUrl: uploadFile,
      uploadParam: {
        folder: 'PUBLIC_IMG'
      },
      itemIndexTemp: 0,

      contentTemp: {},
      venueContentTemp: {}
    }
  },
  created() {
    this.rowNumList = [...this.config.rowNumList]
    this.ruleList = [...this.config.ruleList]
    this.content = { ...this.config.content }
    this.venueContent = { ...this.config.venueContent }

    this.contentTemp = JSON.parse(JSON.stringify(this.config.content))
    this.venueContentTemp = JSON.parse(JSON.stringify(this.config.venueContent))
  },
  methods: {
    moduleItemDel(id) {
      const customList = [...this.venueContent.customList]
      const index = customList.findIndex(i => i.id === id)
      customList[index].isSelect = '0'
      this.venueContent.customList = customList
      this.modulesChange()
    },
    modulesChange() {
      const { content, contentTemp, venueContent, venueContentTemp } = this
      let count = 0
      if (content.rowNum !== contentTemp.rowNum) {
        count++
      }
      if (venueContent.customList && venueContentTemp.customList && venueContent.customList.map(i => i.isSelect).join(',') !== venueContentTemp.customList.map(i => i.isSelect).join(',')) {
        count++
      }
      if (venueContent.customList && venueContentTemp.customList && venueContent.customList.map(i => i.title).join(',') !== venueContentTemp.customList.map(i => i.title).join(',')) {
        count++
      }
      this.$store.dispatch('app/changeMiniFlag', {
        code: 'modulesFlag',
        flag: count > 0
      })
      const temp = this.venueContent.customList.filter(i => i.isSelect === '1')
      this.$bus.$emit('miniModulesChange', this.content.rowNum, temp)
    },
    customSub() {
      this.isShowDrawer = false
      this.modulesChange()
    },
    openDrawer() {
      this.isShowDrawer = true
    },
    dragSuccess() {},
    async addFileChange(file, id) {
      // 上传，拿到file文件
      this.files = file.raw
      this.$nextTick(() => {
        this.optionImg = URL.createObjectURL(file.raw)
        this.fileinfo = file.raw
        this.dialogCropperVisible = true
      })
      const index = this.venueContent.customList.findIndex(i => i.id === id)
      this.itemIndexTemp = index
      console.log(this.itemIndexTemp)
    },
    // 裁剪确定按钮
    cropperSubmit(config) {
      // preImg 完整路径  urlPre 不包含域名
      this.isShowCropper = false
      if (config.success) {
        const { insertUrl, showUrl } = config
        const index = this.itemIndexTemp
        const arrTemp = [...this.venueContent.customList]
        arrTemp[index].icon = showUrl
        this.venueContent.customList = arrTemp
        this.fileinfo = config
        this.dialogCropperVisible = false
      } else {
        this.$message.error(config.msg || '上传失败')
        this.dialogCropperVisible = false
      }
    },
    cropperClose() {
      this.dialogCropperVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.drawer_wrap{
  height: calc(100% - 100px);
  overflow: auto;
}
.customDrawer{
  display: flex;
  flex-wrap: wrap;
  .item{
    width: 220px;
    height: 80px;
    margin: 5px;
    padding: 20px;
    border-radius: 2px;
    border: 1px solid #DFE2E8;
    display: flex;
    align-items: center;
    img{
      width: 60px;
      height: 60px;
      margin: 0 10px;
    }
    .flex1{
      font-size: 14px;
    }
  }
}
.side{
  height: calc(100% - 100px);
  overflow: auto;
  .list{
    display: flex;
    flex-wrap: wrap;
    align-items: align-self;
    margin-top: 20px;
    font-size: 14px;
    /* height: calc(100% - 100px); */
    /* overflow: auto; */
    .item{
      flex-shrink: 0;
      margin-right: 20px;
      margin-bottom: 10px;
      width: 224px;
      height: 80px;
      padding: 10px;
      position: relative;
      border: 1px solid #DFE2E8;
      display: flex;
      align-items: flex-end;
      cursor: pointer;
      .img_wrap{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 60px;
        height: 60px;
        position: relative;
        &:hover{
          .upload_btn{
            display: block;
          }
        }
        .img{
          width: 80%;
          height: 80%;
        }
        .upload_btn{
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          background-color: #979898;
          color: #fff;
          height: 20px;
          line-height: 20px;
          text-align: center;
          display: none;
          font-size: 12px;
        }
      }
      .input_wrap{
        position: relative;
        flex: 1;
        span{
          position: absolute;
          top: 9px;
          right: 10px;
          color: #999999;
        }
        ::v-deep .el-input__inner {
          padding-right: 40px;
        }
      }

      &:hover{
        .del_wrap{
          display: block;
        }
      }
      .del_wrap{
        display: none;
        position: absolute;
        right: 0;
        top: 0;
        width: 20px;
        height: 20px;
        line-height: 20px;
        border-radius:  0 0 0 4px;
        text-align: center;
        background-color: #FDEBE8;
        color: #EE3821;
        font-size: 12px;
        cursor: pointer;
      }
      .drag{
        position: absolute;
        left: 0;
        top: 0;
      }
    }
  }
}
.drawer_bottom {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0px;
  padding-bottom: 20px;
  background-color: #fff;
  z-index: 1000;
  .separate {
    width: 100%;
    height: 1px;
    margin: 20px 0px;
    background-color: #dfe2e8;
  }
}
</style>
